<%-- 
    Document   : index
    Created on : 18-nov-2013, 11.35.34
    Author     : Ilo
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html dir="ltr" lang="it-IT">
    <head>
        <title>EvenTO::Registra Evento</title>

        <jsp:include page="html/metadata.jsp"/>

        <script src="js/jquery.datetimepicker.js"></script>
        <script lang="javascript">
            $(function() {
                $("#datepickerstart").datetimepicker();
                $("#datepickerend").datetimepicker();
                
                $("#showNewLocation").hide();
                
                function hideNewLocation(){
                    $("#showNewLocation").hide();
                    $("#eventLocation").show();
                    
                     //riattiva tutti i campi
                    $("#insertEvent").removeAttr('disabled');
                    $('input[name="eventName"]').removeAttr('disabled');
                    $('input[name="eventDescription"]').removeAttr('disabled');
                    $('select[name="eventType"]').removeAttr('disabled');
                    $('input[name="eventStartDate"]').removeAttr('disabled');
                    $('input[name="eventEndDate"]').removeAttr('disabled');
                    $('input[name="eventLink"]').removeAttr('disabled');
                }
                
                
                $("#btnAddLoc").click(function(e){
                    e.preventDefault();
                    
                    var newLoc=$('input[name="eventLocationName"]').val();
                    var locationData = {type: "insertLocation",
                                        eventLocationName: $('input[name="eventLocationName"]').val(),
                                        eventLocationAddress: $('input[name="eventLocationAddress"]').val(),
                                        eventLocationDescription: $('input[name="eventLocationDescription"]').val()
                                    };

                    $.post("Controller", locationData,
                            function(data) {
                                if (data.status === 0) {
                                     $('#outputMsg').html("<ul>"+data.message+"</ul>");     
                                     $('input[name="eventLocation"]').val(newLoc);
                                }
                                else {
                                     $('#outputMsg').html("<ul>"+data.message+"</ul>"); 
                                }
                            },
                            'json');
                            
                    hideNewLocation();
                });
                
                $("#btnClose").click(function(e){
                    e.preventDefault();
                    
                    $("#eventLocationName").val("");
                    $("#eventLocationAddress").val("");
                    $("#eventLocationDescription").val("");                   
                    $("#eventLocation").val("");
                    
                    hideNewLocation();
                    
                });     
                                          
                $(document).on("click","#addLocation", function () { 
                    $("#showNewLocation").show();
                    $("#eventLocation").hide();   
                    //disabilita tutti campi tranne la location
                    $("#insertEvent").attr('disabled','disabled');
                    $('input[name="eventName"]').attr('disabled','disabled');
                    $('input[name="eventDescription"]').attr('disabled','disabled');
                    $('select[name="eventType"]').attr('disabled','disabled');
                    $('input[name="eventStartDate"]').attr('disabled','disabled');
                    $('input[name="eventEndDate"]').attr('disabled','disabled');
                    $('input[name="eventLink"]').attr('disabled', 'disabled');                
                });
                
                $("#eventLocation").on("keydown", function( event ) {                   
                    if ($("#eventLocation").val() === "Nuova Locazione" && (event.which === 13 || event.which === 9)) { //13=invio,9=tab,32=space
                       $("#addLocation").trigger('click');//lancia evento click che viene gestito nella funzione precedente
                       
                    }                    
                });
                
                $.ui.autocomplete.prototype._renderItem = function (ul, item) {
                    return $("<li></li>")
                        .data("item.autocomplete", item)
                        .append($("<a></a>").html(item.label))
                        .appendTo(ul);
                };
                /*
                 *  EVENT LOCATION CON AUTOCOMPLETAMENTO*/
                $("#eventLocation").autocomplete({
                    source: "Controller?type=getlocations",
                    
                    response: function (event, ui) {
                        // Add this id='addLocation'e New Location object to the list of suggestions
                        ui.content.push({
                            label: "<div id='addLocation'>Nuova Locazione</div>",
                            value: "Nuova Locazione"
                        });                        
                    },
                    select: function(event, ui) {
                        $("#eventLocation").val(ui.item.label);
                        $("#eventLocation-id").html(ui.item.id);
                        $("#eventLocation-description").html(ui.item.description);
                        $("#eventLocation-geolocation").html(ui.item.geolocation);
                        $("#eventLocation-address").html(ui.item.address);

                        return false;
                    }    
                });                
               
                /* INSERT EVENT */
                $('#insertEvent').click(function(e) {
                    e.preventDefault();
                    
                    /* CONTROLLI */
                     var flag=true;
                     var error="";
                     
                     if($('input[name="eventName"]').val()===""){
                         flag=false;
                         error+="<li>Inserisci nome evento</li>";
                     }
                     if($('input[name="eventDescription"]').val()===""){
                         flag=false;
                         error+="<li>Inserisci la descrizione dell'evento</li>";
                     }
                     if($('input[name="eventStartDate"]').val()===""){
                         flag=false;
                         error+="<li>Data di inizio evento scorretta</li>";
                     }
                     if($('input[name="eventEndDate"]').val()===""){
                         flag=false;
                         error+="<li>Data di fine evento scorretta</li>";
                     }
                     
                     $('#outputMsg').html("<ul>"+error+"</ul>");
                    /* /CONTROLLI*/
                     
                    if(flag){//controlli superati                                                                                                      
                        var sendData={type: "insertEvent",
                                    eventName: $('input[name="eventName"]').val(),
                                    eventDescription: $('input[name="eventDescription"]').val(),
                                    eventStartDate: $('input[name="eventStartDate"]').val(),
                                    eventEndDate: $('input[name="eventEndDate"]').val(),
                                    eventLink: $('input[name="eventLink"]').val(),
                                    eventType: $('select[name="eventType"]').val(),
                                    eventLocation: $('input[name="eventLocation"]').val()
                                };
                            
                        $.post("Controller",sendData,
                        function(data) {
                            if (data.status === 0) {
                                $('#outputMsg').html("<ul>"+data.message+"</ul>"); 
                                // similar behavior as an HTTP redirect
                                window.location.replace("index.jsp"); 
                            }
                            else {
                                //$('#outputMsg').text("*"+data.status + ": " + data.message);
                                $('#outputMsg').html("<ul>"+data.message+"</ul>");
                            }
                        },
                                'json');
                    }
                    //alert("metodo insertEvent completatato ");
                });
                /* /INSERT EVENT */

                /* TYPE EVENT*/
                $.getJSON("Controller?type=getType", function(data) {
                    var items = [];
                    $.each(data, function(key, val) {
                        items.push("<option value='" + val.id + "'>" + val.label + "</option>");
                    });

                    $("<select/>", {
                        name: "eventType",
                        html: items.join("")
                    }).appendTo("#eventTypeDiv");

                });
                /* /TYPE EVENT*/
            });
        </script>
    </head>
    <body>
        <div id="evento-main">
            <!-- header -->
            <jsp:include page="html/header.jsp" />
            <!-- /header -->

            <!-- top-menu -->
            <%@include file="html/top-menu.jsp" %>
            <!-- /top-menu -->

            <div class="evento-sheet clearfix">
                <div class="evento-layout-wrapper">
                    <div class="evento-content-layout">
                        <div class="evento-content-layout-row">
                            <div class="evento-layout-cell evento-content">
                                <article class="evento-post evento-article">
                                    <div class="evento-postmetadataheader">
                                        <h2 class="evento-postheader">Registratra Evento</h2>
                                    </div>

                                    <div class="evento-postcontent evento-postcontent-0 clearfix">
                                        <form id="frmInsertEvent">
                                            Nome Evento: <input type="text" name="eventName"/>
                                            <br>
                                            Descrizione: <input type="text" name="eventDescription"/>
                                            <br>
                                            Tipo Evento:
                                            <div  id="eventTypeDiv"></div>
                                            <br>
                                            Data di inzio: <input type="text" name="eventStartDate" id="datepickerstart"/>
                                            <br>
                                            Data di fine: <input type="text" name="eventEndDate" id="datepickerend"/>
                                            <br>
                                           
                                            Luogo: <input type="text" name="eventLocation" id="eventLocation"/>
                                            <br>
                                            <fieldset id="showNewLocation">
                                                Nome: <input type="text" name="eventLocationName" id="eventLocationName"/>
                                                <br>
                                                Indirizzo: <input type="text" name="eventLocationAddress" id="eventLocationAddress"/>
                                                <br>
                                                Descrizione: <input type="text" name="eventLocationDescription" id="eventLocationDescription"/>
                                                <br>
                                                <input type="button" id="btnAddLoc" class="evento-button" value="Aggiungi"/>
                                                <input type="button" id="btnClose" class="evento-button" value="Chiudi"/>
                                            </fieldset>
                                            Link: <input type="text" name="eventLink"/>
                                            <br>
                                            
                                            <br>       
                                            <input type="button" id="insertEvent" class="evento-button" value="Inserisci"/>
                                        </form>
                                        <div id="outputMsg"></div>
                                    </div>
                                </article>
                            </div>

                            <!-- sidebar -->
                            <jsp:include page="html/sidebar.jsp" />
                            <!-- /sidebar -->

                        </div>
                    </div>
                </div>

                <!-- footer -->
                <%@include file="html/footer.jsp" %>
                <!-- /footer -->

            </div>
        </div>
    </body>
</html>
